<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
        width: 800px;
        height: 650px;
        background-color: transparent;
        border-radius: 10px 0px 10px 0px;
        border: 1px solid transparent;
        margin: auto;
        display: grid;
        grid-template-rows: repeat(4,1fr);
        grid-template-columns: repeat(5,1fr);
    }
    img{
        border-radius: 10px 0px 10px 0px;
        border: 2px solid rgb(110,167,243);
        width: 150px;
        height: 148px;
        display: inline-block;
    }
    </style>
</head>
<body>
    <script>
         let sum=0
        while(true){
          sum = +prompt(`请输入要渲染的一个英雄图片个数`)
         if(sum>=1 && sum<=20){
          break;
         }
         else{
          alert('数值过大')
         }
      }
      document.write(`<div class="box">`)
          for(let j=1;j<=sum;j++){
             document.write(
          `<img src="./images/${j}.webp" alt="">`)
          }
          document.write(`</div>`)
    </script>
</body>
</html>